<!DOCTYPE html>
<html>
<head>
	<title>浮动与清除</title>
	<meta charset="utf-8"/>
	<style type="text/css">
		#a{
			width:1000px;
			height: 200px;
			background: red;
		}
		#b1{
			width: 300px;
			height: 800px;
			background: yellow;
			float: left;
		}
		#b2{
			width: 700px;
			height: 800px;
			background: green;
			float: left;
		}
		#c{
			width: 1000px;
			height:200px;
			background: blue;
			/*第一种*/
			clear: left;
			clear: both;
		}
		/*第二种*/
		#b:after{
			content: "";
			height: 0;
			display: block;
			clear: both;
		}
		/*第三种*/
		#b{
			overflow: hidden;
		}
	</style>
</head>
<body>
	<div id="a"></div>
	<div id="b">
		<div id="b1"></div>
		<div id="b2"></div>
	</div>
	<div id="c"></div>
</body>
</html>